
// import * as echarts from '../../../../ec-canvas/echarts';
// const systemInfo = wx.getSystemInfoSync();

// Component({
//   properties: {
//   },

//   data: {
//     ec: {
//       lazyLoad: true
//     },
//   },
//   ready() {
//   },
//   pageLifetimes: {

//   },
//   methods: {
  
//     countEcharts(data){
//       let mychart = this.selectComponent("#mychart-dom-bar");
//       mychart.init((canvas, width, height) => {
//         const Chart = echarts.init(canvas, null, {
//           width: width,
//           height: height
//         });
//         Chart.setOption(this.getBarOption(data.result))
//       })
//     },

//     // 配置bar
//     getBarOption(result) {
//       console.log('趋势健康度',result)
//       let data = []
//       result.health1.forEach((item, index )=> {
//         data.push([result.labels[index], item])
//       })
//       let markAreaData = [];
//       let shutdownTime = result.shutdownTime || [];
//       shutdownTime.forEach(item => {
//         let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
//         if (item.timeLabS === item.timeLabE) {
//           markAreaData.push([{
//             name: name.join("\n"),
//             xAxis: item.timeLabS,
//             emphasis: { label: { show: false }, itemStyle: { color: '#CECECE' } },
//             itemStyle: {
//               color: '#CECECE',
//               borderWidth: 1,
//               borderColor: '#CECECE',
//               borderType: 'solid'
//             }
//           }, {
//             xAxis: item.timeLabE,
//             emphasis: { label: { show: false }, itemStyle: { color: '#CECECE' } },
//             itemStyle: {
//               color: '#CECECE',
//               borderWidth: 1,
//               borderColor: '#CECECE',
//               borderType: 'solid'
//             }
//           }])
//         } else {
//           markAreaData.push(
//             [
//               {
//                 name: name.join("\n"),
//                 xAxis: item.timeLabS,
//                 emphasis: { label: { show: false }, itemStyle: { color: "#CECECE" } },
//                 itemStyle: { color: "#CECECE" }
//               },
//               {
//                 xAxis: item.timeLabE,
//                 emphasis: { label: { show: false }, itemStyle: { color: "#CECECE" } },
//                 itemStyle: { color: "#CECECE" }
//               },
//             ]
//           )
//         }
//       })
//       return {
//         animation: true,
//         legend: {
//           data: ['趋势健康度'],
//           top: 0,
//           itemStyle: {
//             normal: {
//               lineStyle: {
//                 color: "#fff"
//               }
//             }
//           },
//           textStyle: {
//             color: "#BAD7FF",
//             fontSize: 9,
//           }
//         },
//         xAxis: {
//           type: 'category',
//           // name: '时间',
//           // nameGap: 5.5,
//           splitLine: {
//             show: false
//           },
//           data: result.labels,
          
//           // nameTextStyle: {
//           //   color: "#BAD7FF",
//           //   fontSize: 12,

//           // },
//           axisLabel: {
//             margin: 10,
//             color: "#BAD7FF",
//             fontSize:9
//           },
//           axisLine: {
//             lineStyle: {
//               color: '#39529A'
//             }
//           }
//         },
//         yAxis: {
//           type: 'value',
//           min: 0,
//           max: 100,
//           boundaryGap: true,
//           axisTick: {
//             inside: true,
//             alignWithLabel: true,
//           },
//           splitLine: {
//             show: false
//           },
//           axisLabel: {
//             color: "#BAD7FF",
//             fontSize: 9,
//           },
//           z: 10,
//           axisLine: {
//             lineStyle: {
//               color: '#39529A'
//             }
//           }
//         },
//         grid: {
//           top: 24,
//           left: 50,
//           right: 30,
//           bottom: 26,
//           height: systemInfo.windowWidth <= 360 && 80 || 110
//         },
//         dataZoom: [{
//           type: 'inside',
//           throttle: 50
//         }],
//         series: [
//           {
//             name: '趋势健康度',
//             type: 'line',
//             smooth: true,
//             symbol: 'circle',
//             symbolSize: 5,
//             sampling: 'average',
//             lineStyle: {
//               color: {
//                 colorStops: [{
//                   offset: 0, color: '#3AD5AB' // 0% 处的颜色
//                 }, {
//                     offset: 1, color: '#3AD5AB' // 100% 处的颜色
//                 }],
//               }
//             },
//             itemStyle: {
//               normal: {
//                 color: 'rgba(58, 213, 171, 1)'
//               }
//             },
//             stack: 'a',
//             areaStyle: {
//               normal: {
//                 color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [{
//                   offset: 0,
//                   color: 'rgba(58, 213, 171, 0.5)' ,
//                 }, {
//                   offset: 1,
//                     color: 'rgba(58, 213, 171, 0.1)',
//                 }])
//               }
//             },
//             markArea: {
//               label: {
//                 show: false
//               },
//               data: markAreaData,
//             },
//             data: data
//           },
//         ]
//       };
//     },
//   }
// })
import * as echarts from '../../../../ec-canvas/echarts';
const systemInfo = wx.getSystemInfoSync();
Component({
  properties: {
  },

  data: {
    ec: {
      lazyload: true
    },
  },
  ready() {
  },
  pageLifetimes: {

  },
  methods: {
    countEcharts(data) {
      let mychart = this.selectComponent('#mychart-dom-bar');
      mychart.init((canvas, width, height) => {
        let chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.getBarOption(chart, data.result)
        chart.on('mousedown', (param) => {
          if (param.componentType === "markArea" || param.componentType === "markLine") {
            this.triggerEvent("showArea", param.name)
          }
        })
        return chart
      })
    },
    // 配置bar
    getBarOption(chart,result) {
      let data = []
      result.health1.forEach((item, index )=> {
        data.push([result.labels[index], item])
      })
      let markAreaData = [];
      let markLineData = [];
      let shutdownTime = result.shutdownTime || [];
      shutdownTime.forEach(item => {
        let name = [`开始时间：${item.timeLabS}`, `结束时间：${item.timeLabE}`, "描述：设备停机"];
        if (item.timeLabS === item.timeLabE) {
          markLineData.push({
            name: name.join("\n"),
            xAxis: item.timeLabS,
            emphasis: { label: { show: false } },
            lineStyle: {
              type: "solid",
              color: 'rgba(255,255,255,0.2)'
            },
          })
          // markAreaData.push([{
          //   name: name.join("\n"),
          //   xAxis: item.timeLabS,
          //   emphasis: { label: { show: false }, itemStyle: { color: '#CECECE' } },
          //   itemStyle: {
          //     color: '#CECECE',
          //     borderWidth: 1,
          //     borderColor: '#CECECE',
          //     borderType: 'solid'
          //   }
          // }, {
          //   xAxis: item.timeLabE,
          //   emphasis: { label: { show: false }, itemStyle: { color: '#CECECE' } },
          //   itemStyle: {
          //     color: '#CECECE',
          //     borderWidth: 1,
          //     borderColor: '#CECECE',
          //     borderType: 'solid'
          //   }
          // }])
        } else {
          markAreaData.push(
            [
              {
                name: name.join("\n"),
                xAxis: item.timeLabS,
                emphasis: { label: { show: false }, itemStyle: { color: "rgba(255,255,255,0.2)" } },
                itemStyle: { color: "rgba(255,255,255,0.2)" }
              },
              {
                xAxis: item.timeLabE,
                emphasis: { label: { show: false }, itemStyle: { color: "rgba(255,255,255,0.2)" } },
                itemStyle: { color: "rgba(255,255,255,0.2)" }
              },
            ]
          )
        }
      })
      let option = {
        animation: false,
        legend: {
          data: ['趋势健康度'],
          top: 0,
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          textStyle: {
            color: "#BAD7FF",
            fontSize: 9,
          }
        },
        tooltip: {
          trigger: 'axis',
          confine: true,
          extraCssText: "z-index:98",
          formatter: function (params) {
            var result = params[0].name;
            params.forEach(function (item) {
              if (item.data) {
                result += "\n" + item.seriesName + ": " + item.data[1];
              }
            });
            return result;
          }
        },  
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: result.labels,
          axisLabel: {
            margin: 10,
            color: "#BAD7FF",
            fontSize:9
          },
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          boundaryGap: true,
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "#BAD7FF",
            fontSize: 9,
          },
          z: 10,
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        grid: {
          top: 24,
          left: 50,
          right: 30,
          bottom: 26,
          height: systemInfo.windowWidth <= 360 && 80 || 110
        },
        dataZoom: [{
          type: 'inside',
          throttle: 50
        }],
        series: [
          {
            name: '趋势健康度',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            sampling: 'average',
            lineStyle: {
              color: {
                colorStops: [{
                  offset: 0, color: '#3AD5AB' // 0% 处的颜色
                }, {
                    offset: 1, color: '#3AD5AB' // 100% 处的颜色
                }],
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(58, 213, 171, 1)'
              }
            },
            stack: 'a',
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [{
                  offset: 0,
                  color: 'rgba(58, 213, 171, 0.5)' ,
                }, {
                  offset: 1,
                    color: 'rgba(58, 213, 171, 0.1)',
                }])
              }
            },
            markArea: {
              label: {
                show: false
              },
              data: markAreaData,
            },
            markLine: {
              symbol: "none",
              label: {
                show: false
              },
              data: markLineData,
              z: 10
            },
            data: data
          },
        ]
      };
      chart.setOption(option);
    },   
  }
})